<template>
    <div class="in-common one" @click="patientInformationClick">病人信息</div>
    <div class="in-common two" @click="diagnosisClick">诊断</div>
    <div class="in-common three" @click="toHospitalTodayClick">今日出院</div>
    <div class="in-common four" style="color: #fff; border: none; background:#FF6E5A !important;" @click="drugRepercussionClick">退药</div>
    <div class="in-common five" style="color: #fff; border: none; background:#349D5F !important;" @click="costsSelectClick">费用查询</div>
    <div class="in-common six"  @click="infectiousDiseaseReportCardClick">传染病报告卡</div>
    <div class="in-common seven" @click="deathCertificateClick">死亡证明</div>
  <div class="app-container" style="margin: 0 5px 0 5px; width: calc(100% - 20px);">
    <div class="app-container-header">
    <div class="search-container" style="margin-top: -5px;">
      <!-- <el-form ref="showParamsRef" :inline="true" :model="showParams" label-width="70px"> -->
        <div class="app-container-info">
          <div class="app-container-info-title">患者信息</div>
          <div class="app-container-info-content">
            <span>
              {{showParams.name + ' '}}
              </span>
              <span>{{showParams.ageAll}}
              <svg-icon :icon-class="dictStore.getMateDictInfo(dictDataMap['sys_user_sex'], showParams.sex)
                                .dictValue === '1'
                                ? 'man'
                                : 'woman'
                                "/></span>
          </div>
        </div>
        <div class="app-container-info">
          <div class="app-container-info-title">住院号:</div>
          <div class="app-container-info-content">
            <span>{{ showParams.hospitalNo }}</span>
          </div>
        </div>
        <div class="app-container-info">
          <div class="app-container-info-title">住院天数</div>
          <div class="app-container-info-content">
            <span>{{
              showParams.hospitalizationDays
               ? showParams.hospitalizationDays
               : "0"
               }}</span>
          </div>
        </div>
        <div class="app-container-info">
          <div class="app-container-info-title">总费用</div>
          <div class="app-container-info-content">
            <span>{{
                    showParams.expensesIncurred ?
                      showParams.expensesIncurred.toFixed(2)
                      :0.00
                     }}</span>
          </div>
        </div>
        <div class="app-container-info">
          <div class="app-container-info-title">预交金</div>
          <div class="app-container-info-content">
            <span>{{
               showParams.patPrepaymentSum
               ? showParams.patPrepaymentSum.toFixed(2)
               : 0.00 }}</span>
          </div>
        </div>
        <div class="app-container-info">
          <div class="app-container-info-title">收费类别</div>
          <div class="app-container-info-content">
            <span>{{
              dictStore.getMateDictInfo(
                  dictDataMap["medical_insurance_type"],
                  showParams.chargeType
                )
                  ? dictStore.getMateDictInfo(
                    dictDataMap["medical_insurance_type"],
                    showParams.chargeType
                  ).dictLabel
                  : ""
                   }}</span>
          </div>
        </div>

    </div>
    <orders class="search-container-lable" ref="ordersRef" :hospital-no="showParams.hospitalNo" :patient-id="patientIdThis"
            :patient-info="patient" :visit-id="visitIdThis" :ward-code="showParams.wardCode"/>
    </div>
    <el-drawer
      v-model="drawer"
      :before-close="drawerClose"
      :close-on-click-modal="false"
      :direction="direction"
      :size="drawerSize"
      :title="drawerTitle"
    >
      <template #header>
        <div class="ml20 fz15" style="color: #00c0ef">
          <span class="mr20" style="font-size: 16px;font-weight: bold;color: #484848">{{ drawerTitle }}</span>
          <span class="fz15 mr5" style="color: #7171ff">{{
              showParams.name
            }}
                    </span>
          <!--                    {{showParams}}-->
          <span class="mr10"><span class="mr5">{{ showParams.age }} 岁{{ showParams.ageMonth }} 月{{
              showParams.ageDay
            }}天{{
              showParams.ageHours
            }}小时</span>

                            <svg-icon :icon-class="dictStore.getMateDictInfo(dictDataMap['sys_user_sex'], showParams.sex)
                                .dictValue === '1'
                                ? 'man'
                                : 'woman'
                                "/>&nbsp;&nbsp;|</span>
          <span>住院号：<span class="ys-css">{{ showParams.hospitalNo }}&nbsp;&nbsp;|</span></span>
          <span>床号：<span class="ys-css">{{ showParams.bedNo }}&nbsp;&nbsp;|</span></span>
          <span>收费类别：<span class="ys-css">{{
              dictStore.getMateDictInfo(
                dictDataMap["medical_insurance_type"],
                showParams.chargeType
              )
                ? dictStore.getMateDictInfo(
                  dictDataMap["medical_insurance_type"],
                  showParams.chargeType
                ).dictLabel
                : ""
            }}</span>
                    </span>
        </div>
      </template>
      <template #default>
        <patient-info v-if="drawerType === 'patientInformation'" ref="patientInfRef" :org-id="userInfo.orgId"
                      :patient-id="patientIdThis" :visit-id="visitIdThis" @save-ok="drawerClose"/>
        <diagnosis v-if="drawerType === 'diagnosis'" ref="diagnosisRef" :org-id="userInfo.orgId"
                   :patient-id="patientIdThis" :visit-id="visitIdThis"/>
        <pat-discharge v-if="drawerType === 'toHospitalToday'" ref="patDischargeRef" :org-id="userInfo.orgId"
                       :patient-id="patientIdThis" :visit-id="visitIdThis" @save-ok="patDischargeClose"
        />
        <inp-bill-detail v-if="drawerType === 'inpBillDetailIndex'" ref="inpBillDetailRef"
                         :is-show-query="false" :patient-id="patientIdThis" :visit-id="visitIdThis"/>
        <drug-repercussion-index v-if="drawerType === 'drugRepercussionIndex'" ref="drugRepercussionIndexRef"
                                 :is-return-ok="false" :patient-id="patientIdThis" :visit-id="visitIdThis"/>
      </template>
      <template #footer>
        <div style="flex: auto" v-if="showFooterButtons">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">
            {{ drawerType === 'patientInformation' ? '保存' : '确定' }}
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import {useUserStoreHook} from "@/store/modules/user";
import {useDictStoreHook} from "@/store/modules/dict";
import {listBedRecAndPatientDoctor} from '@/api/hospitalization/patVisit';
import orders from "./orders.vue"
import patientInfo from "./patientInfo.vue";
import diagnosis from "./diagnosis.vue";
import patDischarge from "./patDischarge.vue";
import inpBillDetail from "@/views/hospitalization/inpBillDetail/index.vue"
import drugRepercussionIndex from "@/views/drug/drugDisp/drugRepercussionIndex.vue"

const {proxy} = getCurrentInstance() as any;

const patientInfRef = ref()
const diagnosisRef = ref()
const patDischargeRef = ref()
const inpBillDetailRef = ref()
const drugRepercussionIndexRef = ref()
const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('medical_insurance_type', 'sys_user_sex'))
const currentSelectDept = proxy.$currentSelectDept
const ordersRef = ref()
// 侧边弹出框
const drawer = ref(false)
//侧边弹窗框底部按钮
const showFooterButtons = ref(true);
// 侧边弹出框 弹出方向
const direction = ref('rtl')
// 侧边弹出框 标题
const drawerTitle = ref("")
// 侧边弹出框 宽度
const drawerSize = ref('30%')
// 右侧弹出框显示内容
const drawerType = ref("patientInformation")
const visitIdThis = ref<string>("")
const patientIdThis = ref<string>("")
const props = defineProps({
  visitId: {
    type: String,
    default: ""
  },
  patientId: {
    type: String,
    default: ""
  },
  patientInfoThis: {
    type: Object,
    default: () => {},
  }
})

const showParams = ref<any>({
  visitId: visitIdThis.value
})

// 用作给手术、用血弹出框动态传参
const patient = ref<any>()
watch(()=> props.patientInfoThis, (newValue, oldValue) => {
  if (!oldValue || newValue === oldValue) {
    patient.value = newValue
  }
}, {deep: true, immediate: true})


watch(() => props.visitId, (newValue, oldValue) => {
  if (!oldValue || newValue === oldValue) {
    visitIdThis.value = newValue
    proxy.$setVisitId(visitIdThis.value);
  }
  getList()

}, {deep: true, immediate: true})

watch(() => props.patientId, (newValue, oldValue) => {
  if (!oldValue || newValue === oldValue) {
    patientIdThis.value = newValue
    // 设置全局patientId
    proxy.$setPatientId(patientIdThis.value);
  }
}, {deep: true, immediate: true})

function getList() {
  if (currentSelectDept) {
    const param = {
      visitId: visitIdThis.value,
      orgId: userInfo.orgId
    }
    listBedRecAndPatientDoctor(param).then((res: resType) => {
      if (res.data) {
        showParams.value = res.data[0]
        let patPrepaymentSumThis = 0 as number
        if (showParams.value.patPrepaymentVos) {
          showParams.value.patPrepaymentVos.forEach((patPrepayment: any) => {
            patPrepaymentSumThis += Number(patPrepayment.amountOfMoney)
          })
          showParams.value.patPrepaymentSum = patPrepaymentSumThis
        }
        showParams.value.expensesIncurred = Number(showParams.value.expensesIncurred)
      }
    })
  } else {
    ElMessage.error("请先选择医生的权限科室后，再操作。")
  }
}

/**
 * 病人信息
 */
function patientInformationClick() {
  drawerTitle.value = "病人信息"
  drawerSize.value = '50%'
  drawerType.value = "patientInformation"
  drawerOpen()
  nextTick(() => {
    patientInfRef.value.initOpen(visitIdThis.value, patientIdThis.value)
  })

}

/**
 * 诊断
 */
function diagnosisClick() {
  drawerTitle.value = "病人诊断"
  drawerSize.value = '80%'
  drawerType.value = "diagnosis"
  showFooterButtons.value = false
  drawerOpen()
  nextTick(() => {
    diagnosisRef.value.initOpen(visitIdThis.value, patientIdThis.value)
  })
}

/**
 * 今日出院
 */
function toHospitalTodayClick() {
  drawerTitle.value = "今日出院"
  drawerSize.value = '40%'
  drawerType.value = "toHospitalToday"
  showFooterButtons.value = false
  drawerOpen()
  nextTick(() => {
    patDischargeRef.value.initOpen(visitIdThis.value, patientIdThis.value)
  })
}

/**
 * 退药
 */
function drugRepercussionClick() {
  drawerTitle.value = "退药"
  drawerSize.value = '80%'
  drawerType.value = "drugRepercussionIndex"
  drawerOpen()
  nextTick(() => {
    const obj = {
      visitId: visitIdThis.value,
      patientId: patientIdThis.value,
    }
    drugRepercussionIndexRef.value.initOpen(obj)
  })
}

/**
 * 费用查询
 */
function costsSelectClick() {
  drawerTitle.value = "费用查询"
  drawerSize.value = '80%'
  drawerType.value = "inpBillDetailIndex"
  drawerOpen()
  const obj = {
    visitId: visitIdThis.value,
    patientId: patientIdThis.value,
  }
  nextTick(() => {
    inpBillDetailRef.value.initOpen(obj)
  })
}

/**
 * 传染病报告卡
 */
function infectiousDiseaseReportCardClick() {
  drawerTitle.value = "传染病报告卡"
  drawerSize.value = '60%'
  drawerType.value = "infectiousDiseaseReportCard"
  drawerOpen()
}

/**
 * 死亡证明
 */
function deathCertificateClick() {
  drawerTitle.value = "死亡证明"
  drawerSize.value = '40%'
  drawerType.value = "deathCertificate"
  drawerOpen()
}

/**
 * 侧边弹出栏打开事件
 */
function drawerOpen() {
  drawer.value = true
}

/**
 * 侧边弹出栏关闭事件
 */
function drawerClose() {
  drawer.value = false
}

/**
 * 今日出院操作成功事件
 */
function patDischargeClose() {
  ordersRef.value.getList()
  drawerClose()
}

/**
 * 右侧边栏 确定事件
 */
function confirmClick() {
  if (drawerType.value === 'patientInformation') {
    patientInfRef.value.savePatientInfo()
  } else if (drawerType.value === 'drugRepercussionIndex') {
    nextTick(() => {
      drugRepercussionIndexRef.value.submitForm()
    })
  }
}

/**
 * 右侧边栏 取消事件
 */
function cancelClick() {
  drawerClose()
}

</script>

<style lang="scss" scoped>

.app-container {
  width: 100%;
  .app-container-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .search-container {
      width: 50%;
      display: flex;
      height: 70px;
      padding-top: 14px;
      background: #4E64F6;
      .header-lable {
        text-align: left;
      }
      .app-container-info {
        flex: 1;
        .app-container-info-title {
          font-weight: 400;
          font-size: 12px;
          color: #B0BAFA;
        }
        .app-container-info-content {
          margin-top: 5px;
          font-weight: 400;
          font-size: 12px;
          color: #FFFFFF;
        }
      }
    }
    .search-container-lable {
     width: 50%;
    }

    .header-button-primary {
      width: 64px;
      height: 24px;
      background: #4E64F6;
      border-radius: 17px;
    }
  }

  @media screen and (max-width: 1920px) {
    .app-container-header {
      display: flex;
    }

    .search-container {
      width: 35% !important;
    }

    .search-container-lable {
      width: 65% !important;
    }
  }
}

:deep(.el-tabs__content) {
  padding: 2px !important;
}

:deep(.el-form-item__content) {
  flex-wrap: nowrap;
}
:deep(.el-radio-group) {
  flex-wrap: nowrap;
}

:deep(.el-drawer.rtl) {
  bottom: 0;
  height: 93%;
  top: 50px;
}

.in-common {
  top: 0;
  right: 0;
  width: 30px;
  background: #fff !important;
  color: #4E64F6;
  border: 1px solid #4E64F6;
  border-radius: 17px;
}
.one {
  top: calc(260px + 153px);
}

.two {
  top: calc(370px + 153px);
  background-color: #1ab394;
}

.three {
  top: calc(440px + 153px);
  background-color: #1ba811;
}

.four {
  top: calc(548px + 153px);
  background-color: #fe0303;
}

.five {
  top: calc(615px + 153px);
  background-color: #0449ff;
}

.six {
  top: 153px;
  background-color: #d3920a;
}

.seven {
  top: calc(150px + 153px);
  background-color: #b30606;
}


@media screen and (max-width: 1920px) {

  .six {
    top: 70px;
  }

  .seven {
    top: 212px;
  }

  .one {
    top: 315px;
  }

  .two {
    top: 418px;
  }

  .three {
    top: 486px;
  }

  .four {
    top: 588px;
  }

  .five {
    top: 652px;
  }

}


:deep(.el-drawer__header) {
  margin-bottom: 8px;
}

</style>
